<!--
 * @Author: coman
 * @LastEditors: coman
 * @Date: 2020-06-29 16:40:22
 * @motto: No pain,No gain
 * @LastEditTime: 2020-06-29 22:40:39
--> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/shop.css">
    <script src="../js/model.js"></script>
</head>
<body>
    <table class="shop">
        <thead>
            <tr class="nav">
                <th class="Son1">Your Item(s)</th>
                <th class="Son2">Quantity</th>
                <th class="Son3">Price</th>
                <th class="Son4">Total Price</th>
                <th class="Son5">Remove</th>
            </tr>
        </thead>
        
        <tbody class="shopS">
            
        </tbody>
        <tfoot>
            <tr class="countall">
                <td>
                    <span><i class="iconL"></i>Continue Shopping</span>
                </td>
            <td class="countRight">
                <span class="cartall">Cart Total: <b></b></span>
                <span class="savetall">Your Total Saving:<i></i></span>
            </td>
             </tr>
        </tfoot>
    </table>
    <script>
        var show = document.querySelector(".shopS");
        list_show();
        var add = document.querySelectorAll(".add");
        var reduce = document.querySelectorAll(".reduce");
        var num = document.querySelectorAll(".count");
        var priceAll = document.querySelectorAll(".priceAll");
        var saveAll = document.querySelectorAll(".saveAll");
        var del = document.querySelectorAll(".del");
        var cart = document.querySelector(".countRight  b");
        var save = document.querySelector(".countRight .savetall i");
   // 初始化数量
   sum_pre();
        console.log(cart);
        cart.innerHTML = total_price().toFixed(2) +'py6';
        save.innerHTML = save_price().toFixed(2)+'py6';

        
   // 加
   add.forEach((item, index) => {
       item.onclick = () => {
           num[index].value = num[index].value * 1 + 1; 
           priceAll[index].innerHTML = (lists[index].nowPrice * lists[index].value).toFixed(2);
           saveAll[index].innerHTML = ((lists[index].oriPrice - lists[index].nowPrice) * lists[index].value).toFixed(2);
           lists[index].value += 1
           cart.innerHTML = total_price().toFixed(2) +'py6';
           save.innerHTML = save_price().toFixed(2)+'py6'
       }
   })
   //    减
   reduce.forEach((item, index) => {
       item.onclick = () => {
           if (num[index].value == 0) {
               alert("无法再减了")
           } else {
               num[index].value = num[index].value * 1 - 1;
               priceAll[index].innerHTML = (lists[index].nowPrice * num[index].value).toFixed(2);
               saveAll[index].innerHTML = ((lists[index].oriPrice - lists[index].nowPrice) * num[index].value).toFixed(2);
            //    total[index].innerHTML = total_count();
             
               lists[index].value -= 1
               cart.innerHTML = total_price().toFixed(2) +'py6';
               save.innerHTML = save_price().toFixed(2)+'py6';
           }
       }
   })
   // 删除
   del.forEach((item, index) => {
       item.onclick = () => {
           if (confirm("确认删除这件商品吗")) {
             cart.innerHTML =( total_price()-lists[index].value*lists[index].nowPrice).toFixed(2) +'py6';
            save.innerHTML = (save_price()-lists[index].value*(lists[index].oriPrice-lists[index].nowPrice)).toFixed(2)+'py6';
          lists[index].value=0;
            console.log(lists);
            
               show.removeChild(item.parentNode.parentNode);
           }
          
       }
   })
   function list_show() {
       
       lists.forEach((value, index) => {
           show.innerHTML += `<tr class="shopList">
      <td class="imgTd"><img class="shops" src="../images/${value.img}" alt="" srcset=""></td>
      <td class="titleTd">
          <h6>${lists[index].title}</h6>
          <span>ID:#${lists[index].id}</span>
          <span>Size:${lists[index].size}</span>
      </td>
      <td class="Son2">
          <span class="reduce">-</span>
          <input type="text" value="1" class="count">
          <span class="add">+</span>
      </td>
      <td class="Son3">
          <del class="oriPrice">${lists[index].oriPrice}</del>
          <b class="nowPrice">${lists[index].nowPrice}</b>
      </td>
      <td class="Son4">
          <span class="priceAll">${lists[index].nowPrice}</span>
          <span class="saveAll">${(lists[index].nowPrice - lists[index].oriPrice).toFixed(2)}</span>
      </td>
      <td class="Son5">
          <img class="del" src="../images/del.png" alt="">
      </td>
  </tr>`
       });
   }
   //初始化数量
   function sum_pre() {
       lists.forEach((item, index) => {
           lists[index].value = 1;
       })
   }
   // 计算一件商品总价
   function total_price() {
      
     return  lists.reduce((pre, cur) => {
           return pre + cur.value*cur.nowPrice;
       }, 0)
       
   }
//    计算一件商品节省的价格
function save_price() {
      
      return  lists.reduce((pre, cur) => {
            return pre + cur.value*(cur.oriPrice-cur.nowPrice);
        }, 0)

    }
    </script>
    
</body>

</html>